<div
  class="search-engine"
  *ngIf="searchList && searchList.length > 0"
  [class.small]="size === 'small'"
>
  <div
    class="input-wrapper dark-bg dark-border-color"
    [class.removeAddon]="currentEngine.url"
  >
    <nz-input-group
      [nzPrefix]="prefixIcon"
      [nzSuffix]="suffixIcon"
      [nzSize]="size"
      [nzAddOnBefore]="addOnBeforeTemplate"
    >
      <input
        type="text"
        nz-input
        [placeholder]="currentEngine.placeholder || ''"
        [(ngModel)]="keyword"
        autofocus
        id="search-engine-input"
        (keyup)="onKey($event)"
        autocomplete="off"
      />
    </nz-input-group>
    <ng-template #prefixIcon>
      <div
        class="left-icon"
        nzPopoverTrigger="click"
        [ngStyle]="{ 'background-image': 'url(' + currentEngine.icon + ')' }"
        nz-popover
        nzPopoverPlacement="bottomLeft"
        [nzPopoverContent]="contentTemplate"
      ></div>

      <ng-template #contentTemplate>
        <div class="engine-main">
          <div
            class="item ellipsis dark-bg-gary dark-item-hover"
            *ngFor="let item of searchList; let i = index"
            (click)="clickEngineItem(i)"
          >
            <app-logo [src]="item.icon || ''" [size]="20" [check]="false" />
            <span class="name2 dark-text ellipsis">{{ item.name }}</span>
          </div>
        </div>
      </ng-template>
    </ng-template>

    <ng-template #suffixIcon>
      <i
        class="search-icon iconfont iconsousuo dark-text"
        (click)="triggerSearch()"
      ></i>
    </ng-template>
    <ng-template #addOnBeforeTemplate>
      <nz-select [(ngModel)]="searchTypeValue" *ngIf="!currentEngine.url">
        <nz-option
          [nzLabel]="$t('_default')"
          [nzValue]="SearchType.All"
        ></nz-option>
        <nz-option
          [nzLabel]="$t('_title')"
          [nzValue]="SearchType.Title"
        ></nz-option>
        <nz-option
          [nzLabel]="$t('_desc')"
          [nzValue]="SearchType.Desc"
        ></nz-option>
        <nz-option
          [nzLabel]="$t('_link')"
          [nzValue]="SearchType.Url"
        ></nz-option>
        <nz-option
          [nzLabel]="$t('_current')"
          [nzValue]="SearchType.Current"
        ></nz-option>
        <nz-option
          [nzLabel]="$t('_quick')"
          [nzValue]="SearchType.Quick"
        ></nz-option>
      </nz-select>
    </ng-template>
  </div>
</div>
